<template>
  <busComp class=""></busComp>
  <div>我是父组件 pageBus</div>
</template>

<!-- <script setup lang="ts">
// 这里vue组件的后缀要不从全了，如果省略，虽然vite 能够识别并正确展示，但是ts无法识别，导致编译器一直提示找不到模块
import busComp from '@/pages/vue3Advance/comp/busComp.vue';
import { getCurrentInstance, onMounted, onBeforeUnmount } from 'vue';
const instance = getCurrentInstance();

function handleBus(val: any) {
  console.log('handleBus', val);
}

onMounted(() => {
  instance?.proxy?.$Bus.on('on-btn-click', handleBus);
})

onBeforeUnmount(() => {
  console.log('beforeUnmount')
  instance?.proxy?.$Bus.off('on-btn-click', handleBus);
});
</script> -->

<script lang="ts">
import { defineComponent, ref, reactive, computed } from 'vue'
import busComp from '@/pages/vue3Advance/comp/busComp.vue'

export default defineComponent({
  components: {
    busComp
  },
  mounted: function () {
    console.log('mounted')
    this.$Bus.on('on-btn-click',this.handleBus)
  },
  beforeUnmount: function () {
    console.log('beforeUnmount')
    this.$Bus.off('on-btn-click',this.handleBus)
  },
  methods: {
    handleBus (val: any) {
      console.log('handleBus', val)
    }
  }
})
</script>

<style scoped lang="scss"></style>
